<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>DingDing Admin</title>
    <!-- base:css -->
    <div th:include="includeJs::bootstrap_js"></div>
    <div th:include="includeJs::layui_js"></div>
</head>
<div class="container-scroller d-flex">
    <div th:replace="includeJs::admin_leftNav"></div>
    <div class="container-fluid page-body-wrapper">
        <div th:replace="includeJs::admin_nav"></div>
        <div class="main-panel">
            <div class="card-body">
                <div class="table-responsive">
                    <script type="text/html" id="top">
                        <label  class="layui-form-item">
                            <label class="layui-form-label" style="width: 90px">标名称:</label>
                            <div class="layui-input-inline">
                                <input class="layui-input"  maxlength="15" name="empName" value=""/>
                            </div>
                            <label class="layui-form-label">标类型:</label>
                            <div class="layui-input-inline">
                                <select id="status"  name="status" lay-verify="required">
                                    <option value="100">--未选择--</option>
                                    <option th:each="t:${dType}" th:text="${t.type}" th:value="${t.TId}" >启用</option>
                                </select>
                            </div>
                            <label class="layui-form-label">期限:</label>
                            <div class="layui-input-inline">
                                <select id="month"  name="month" lay-verify="required">
                                    <option value="100">--未选择--</option>
                                    <option  value="1" >1-3月</option>
                                    <option  value="2" >4-6月</option>
                                    <option  value="3" >6-12月</option>
                                    <option  value="4" >12月及以上</option>
                                </select>
                            </div>
                            <label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <label class="layui-form-label">年利率</label>
                            <div class="layui-input-inline">
                                <select id="yearInterset"  name="yearInterset" lay-verify="required">
                                    <option value="100">--未选择--</option>
                                    <option  value="1" >12%以下</option>
                                    <option  value="2" >12%-14%</option>
                                    <option  value="3" >14%-16%</option>
                                    <option  value="4" >16%以上</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <button id="seek" type="submit" class="layui-btn" onclick="seek()">搜索</button>
                            </div>
                            <div class="layui-input-inline">
                                <a href="/admin/toAddDebit" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">&#xe654;</i>新增借贷</a>
                            </div>
                        </label>
                    </script>
                    <table class="layui-hide" lay-filter="test" id="demo"></table>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit" href="#" >修改</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" href="#">删除</a>
                    </script>

                    <script type="text/html" id="pledge">
                        {{#  if(d.id_pledge==[[${T(com.ddf.publics.tool.Constant).PLEDGE_YES}]]){ }}
                        <a lay-event="switch">
                            <input type="checkbox" name="id_pledge" lay-skin="switch"    checked   lay-text="抵押|无抵押"  value= {{ d.id_pledge}}  lay-filter="id_pledge" >
                        </a>
                        {{#  } else if(d.id_pledge==[[${T(com.ddf.publics.tool.Constant).PLEDGE_NO}]]) { }}
                        <a lay-event="switch">
                            <input class="layui-btn-xs" type="checkbox" name="id_pledge" lay-skin="switch"  lay-event="switch" lay-text="抵押|无抵押"  value= {{ d.id_pledge}} lay-filter="id_pledge" >
                        </a>
                        {{#  } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" >
    let layer;
    let table;
    layui.use(['table', 'layer'], function(){
        layer = layui.layer;
        table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 680
            ,method:'post'
            ,url: '/admin/debitList' //数据接口
            ,page: true //开启分页
            ,id:"clientId"
            ,toolbar: '#top' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [
                [ //表头
                {field: 'm_id', title: '编号', width:80, sort: true, fixed: 'left'}
                ,{field: 'm_name', title: '标名称', width:150}
                ,{field: 'type', title: '标类型', width:100}
                ,{field: 'online_time', title: '上线时间',sort: true, width:180,templet : "<div>{{layui.util.toDateString(d.online_time, 'yyyy年MM月dd日 HH:mm')}}</div>"}
                ,{field: 'month', title: '期限(月)', width:115,sort: true}
                ,{field: 'min_money', title: '借款最小金额', width: 120}
                ,{field: 'max_money', title: '借款最大金额', width: 120}
                ,{field: 'need_level', title: '用户等级需求', width: 115}
                ,{field: 'id_pledge', title: '是否抵押', width:100,toolbar:'#pledge'}
                ,{field: 'day', title: '几天放款', width: 100}
                ,{field: 'year_interset', title: '年利率', width: 80}
                ,{field: 'sell_out', title: '是否售罄', width: 100}
                ,{field: 'sold_out', title: '是否下架', width: 100}
                ,{field: 'm_comment', title: '备注',width: 100}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]
            ]
            ,page: {limit:10,limits:[10,30,50],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
            ,done: function(res, page, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                //分类显示中文名称
                $("[data-field='year_interset']").children().each(function(){
                    let data = $(this).text();
                    if(!isNaN(data)){
                        data = data*100+" %"
                        $(this).text(data);
                    }
                })
                //是否抵押
                $("[data-field='id_pledge']").children().each(function(){})

                //是否售罄
                $("[data-field='sell_out']").children().each(function(){
                    let data = $(this).text();
                    if(data==[[${T(com.ddf.publics.tool.Constant).SELL_OUT_YES}]]){
                        $(this).text('是');
                    }else if(data==[[${T(com.ddf.publics.tool.Constant).SELL_OUT_NO}]]){
                        $(this).text('否');
                    }
                })

                //是否售罄
                $("[data-field='sold_out']").children().each(function(){
                    let data = $(this).text();
                    if(data==[[${T(com.ddf.publics.tool.Constant).SOLD_OUT_YES}]]){
                        $(this).text('是');
                    }else if(data==[[${T(com.ddf.publics.tool.Constant).SOLD_OUT_NO}]]){
                        $(this).text('否');
                    }
                })
            }
        });
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除此条数据吗?', function(index){
                    layer.close(index);//关闭提示
                    window.location.href="/admin/delDebit/"+data.m_id;
                });
            } else if(layEvent === 'edit'){ //修改
                //layer.msg(data.m_id);
                //同步更新缓存对应的值
                /*obj.update({
                    username: '123'
                    ,title: 'xxx'
                });*/
                window.location.href="/admin/updDebit/"+data.m_id;
            }})
    });
</script>
</body>
</html>